<template>
  <a-table
    bordered
    ref="table"
    size="small"
    :columns="columns"
    :row-key="(row) => row.id"
    :data-source="data"
    :pagination="false"
    :loading="loading"
  >
    <template slot="serial" slot-scope="text, item, index">
      <a-checkbox
        :value="index"
        :checked="item.checked"
        @change="onCheckAllChange(item, $event)"
      ></a-checkbox>
    </template>

    <template slot="operations" slot-scope="text, item">
      <template v-if="item.operations">
        <a-checkbox
          v-for="o in item.operations"
          @change="onCheckChange(item, o, $event)"
          :key="o.value"
          :value="o.value"
          :checked="o.checked"
          >{{ o.label }}</a-checkbox
        >
      </template>
    </template>
  </a-table>
</template>
<script>
import { queryMenuPermission } from "@/api/sys/permission/menuPermission";
export default {
  props: {
    role: {
      type: Object,
    },
  },
  data() {
    return {
      loading: false,
      data: [],
      // 内容勾选
      ckOperationList: [],
      checkAll: false,
      // 表头
      columns: [
        {
          title: "#",
          width: "100px",
          scopedSlots: { customRender: "serial" },
        },
        {
          width: "160px",
          title: "菜单名称",
          dataIndex: "name",
        },
        {
          title: "包含操作",
          dataIndex: "operations",
          scopedSlots: { customRender: "operations" },
        },
      ],
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      //加载列表
      let that = this;
      this.spinning = false;
      queryMenuPermission({ roleId: this.role.id })
        .then((res) => {
          that.data = res.data;
          that.spinning = false;
        })
        .catch((error) => {
          that.spinning = false;
        });
    },
    // 单个Operation操作
    onCheckChange(row, item, e) {
      item.checked = e.target.checked;
      if (e.target.checked) {
        row.checked = e.target.checked;
      } else {
        // 取消勾选，查看是否都取消选中，都取消，则父级也取消
        row.checked = row.operations.find((m) => m.checked) ? true : false;
        // 顶级
        let parent = this.$refs.table.dataSource.find(m=>m.id ==row.parentId)
        if(parent){
             parent.checked = parent.children.find((m) => m.checked) ? true : false;
        }
      }
    },
    // 选择每行所有操作
    onCheckAllChange(item, e) {
      item.checked = e.target.checked;
      if (item.operations) {
        item.operations.forEach((element) => {
          element.checked = e.target.checked;
        });
      }
      if (item.children) {
        // 所有子项都选中
        item.children.forEach((element) => {
          this.onCheckAllChange(element, e);
        });
      }
      // 所有子项都选中，则父级也选中
      //   this.$refs.table.dataSource.forEach((row) => {
      //     // 获取父级
      //     if (row.id === item.parentId) {
      //       // 判断父级下面是否全部已选中
      //       row.checked = this.hasCheck(row.children);
      //       return false;
      //     }
      //   });
    },
    // hasCheck(childrens) {
    //   let checked = false;
    //   for (let i = 0; i < childrens.length; i++) {
    //     // 遍历所有子集
    //     if (childrens[i].checked) {
    //       // 如果选中则继续看子集
    //       if (childrens[i].children) {
    //         checked = this.hasCheck(childrens[i].children);
    //       } else {
    //         return true;
    //       }
    //     }
    //   }
    //   return checked;
    // },
  },
};
</script>